<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!-- 清除浏览器缓存 -->
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <!-- 兼容手机模式 -->
    <meta name="viewport"
          content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

    <title>登录</title>
    <link rel="icon" type="image/x-icon"  th:href="@{/images/title.ico}"/>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>

</head>
<style>
    body{
        overflow: hidden;background: #87aad5;
    }
    .beg-login-box{
        position: fixed;
        right: 10%;
        top: 18%;
        z-index: 9999;
        margin: 0px;
        width:350px;
        height: 450px;
        color: #96abbd;
    }
    .beg-login-box .layui-form{
        background: white;border-radius: 5px;height:460px
    }
    .login_bg{
        width:100%;z-index: 99;position: absolute;bottom: 0px;
        transition: all 0.8s ease 0s;
        -webkit-transition: all 0.8s ease 0s;
        transform: scale(1.8);
    }
    .beg-login-box  .layui-form-item{
        text-align: center;
        margin-bottom: 5px;
    }
    .beg-login-box  .layui-form-item input{
        height: 40px;
        color: #6a7f8e;
        padding-left: 40px;
        border-color: #d3e8d3;
    }
    .beg-login-icon{
        position: relative;
        top: 30px;
        left: 10px;
    }
    .beg-login-icon>i{
        font-size: 18px;
    }
    .img_left{
        position: fixed;
        top: 22%;
        left: 15%;
        width: 400px;
        z-index: 9999;
    }
    .layui-elem-field legend{
        margin-left: 0px;
    }
    /** 手机模式样式*/
    .app-form{
        right: 0!important;
        top: 0!important;
        left: 0!important;
        bottom: 0!important;
        margin: auto!important;
    }
    .app-form-min{
        width: 90%;
    }
    .login-title{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 180px;
        font-size: 18px;
        background: white;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-radius: 10px;
    }
    .lay-submit-btn{
        width: 85%;
        text-align: center;
    }
    /** 提交禁用*/
    .btn-submint-state{
        cursor: not-allowed;
    }
    /** 必填提示*/
    .layui-layer-tips .layui-layer-content {
        background-color: #76cb52!important;
    }
    .layui-layer-tips i.layui-layer-TipsL, .layui-layer-tips i.layui-layer-TipsR {
        border-bottom-color: #76cb52!important;
    }
    /** 验证码*/
    .code-img{
        position: absolute;top: 18px;right: 0px;
        width: 120px;
        height: 40px;
        cursor: pointer;
    }
</style>
<body>
    <img alt="" th:src="@{/images/login_bg_2.png}" class="login_bg">
    <img alt="" th:src="@{/images/login_left.png}" class="img_left">
    <div class="beg-login-box">
        <form action="" class="layui-form">
            <div style="position: relative;width: 100%;top: 10px;">
                <div class="login-title">人力资源</div>
            </div>
            <div style="position: relative;top: 35px;margin-bottom: 10px;height: 140px;">
                <img alt="" th:src="@{/images/login_form.png}" style="width: 40%;margin-left: 30%;">
            </div>
            <div style="padding: 10px 30px;">
                <div class="layui-form-item" style="text-align:left;">
                    <label class="beg-login-icon">
                        <i class="layui-icon">&#xe612;</i>
                    </label>
                    <input type="text" name="userName" lay-verify="required"  autocomplete="off" placeholder="请输入登录账号"  lay-reqtext="请填写登录账号" value="" class="layui-input">
                </div>
                <div class="layui-form-item" style="text-align:left;">
                    <label class="beg-login-icon">
                        <i class="layui-icon">&#xe673;</i>
                    </label>
                    <input type="password" name="password" id="pwd" lay-verify="required" autocomplete="off" placeholder="请输入登录密码" lay-reqtext="请填写登录密码" class="layui-input" value="">
                </div>
                <div class="layui-form-item" style="text-align:left;position: relative;">
                    <label class="beg-login-icon">
                        <i title="验证码" class="layui-icon layui-icon-vercode"></i>
                    </label>
                    <input type="text" name="captcha" lay-verify="required" style="width: 55%;" placeholder="验证码" lay-reqtext="请填写验证码" class="layui-input" autocomplete="off">
                    <img th:src="@{/captcha/code}" class="code-img" title="看不清，换一张" onclick="refreshCaptcha()">
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 15px;">
                <button class="layui-btn lay-submit-btn" lay-submit="" lay-filter="formSubmit">登&nbsp;&nbsp;录</button>
            </div>
        </form>
    </div>
</body>
<script type="text/javascript" th:inline="javascript">
    // 获取项目名称（如：/project-name/）
    /*<![CDATA[*/
    var ctxPath = /*[[@{/}]]*/ '';
    /*]]>*/
</script>　　
<script type="text/javascript" th:src="@{/js/util/jquery-2.1.1.min.js}"></script>
<script type="text/javascript" th:src="@{/js/util/aes.min.js}"></script>
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/js/login.js}"></script>
<script type="text/javascript" th:src="@{/js/debugger.js}"></script>
<script type="text/javascript">
    function scaleImg() {
        $(".login_bg").css('transform', 'scale(1)');
    }
    scaleImg();
    /*setInterval(function(){
        var s = $(".login_bg").attr("src");
        $(".login_bg").css('transform','scale(1.8)');
        setTimeout(function(){
            if(s.indexOf("login_bg_1") != -1){
                $(".login_bg").attr("src",s.replace("login_bg_1","login_bg_2"));
            }else if(s.indexOf("login_bg_2") != -1){
                $(".login_bg").attr("src",s.replace("login_bg_2","login_bg_1"));
            }
            scaleImg();
        },800)
    },8000);*/
</script>
</html>